葫芦的运维日志

下一篇 搜索 上一篇

---

/src/components/Users.vue

<template>
  <div class="users">
  <ul>
    <li v-for="user in users">{{user}}</li>
  </ul>
  </div>
</template>

<script>
  export default {
    name: "users",
    data() {
      return {users: ["brownwang", "wangzi", "hulu"]}
    }
  }
</script>

<style scoped>

</style>

1.局部注册：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import Users from './components/Users'
Vue.config.productionTip = false
// 全局注册组件
//Vue.component("users",Users);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

App.vue

<!-- 1模板:html结构 -->
<template>
  <div id="app">
    <h1> {{ title }} </h1>
    <users></users>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>
  // 局部注册组件
  import Users from './components/Users'

  export default {
    name: 'App',
    data() {
      return {
        title: "这是一个干净的脚手架项目!"
      }
    },
    components:{
      "users":Users
    }
  }
</script>

<!-- 3样式:解决样式 -->
<style>

</style>

2.全局注册：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Users from './components/Users'
Vue.config.productionTip = false
// 全局注册组件
Vue.component("users",Users);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

App.vue

<!-- 1模板:html结构 -->
<template>
  <div id="app">
    <h1> {{ title }} </h1>
    <users></users>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>

  export default {
    name: 'App',
    data() {
      return {
        title: "这是一个干净的脚手架项目!"
      }
    }
  }
</script>

<!-- 3样式:解决样式 -->
<style>

</style>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇